<template>
  <div class="queryBox">
    <div class="main-panel">
      <div class="title">搜索结果</div>

      <div class="detail">
        <div class="row">
          <div class="cell">
            <img src="@/assets/query/icon1.png" class="icon" />

            <div class="label">
              姓名：<span class="val">{{ formData?.personData?.name }}</span>
            </div>
          </div>

          <div class="cell">
            <img src="@/assets/query/icon7.png" class="icon" />

            <div class="label">
              登记时间：<span class="val">{{ formData?.personData?.createTime }}</span>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="cell">
            <img src="@/assets/query/icon3.png" class="icon" />

            <div class="label">
              证件号码：<span class="val">{{ formData?.personData?.idCard }}</span>
            </div>
          </div>

          <div class="cell">
            <img src="@/assets/query/icon6.png" class="icon" />

            <div class="label">
              是否常住人口：<span class="val">{{ formData?.personData?.sfczrq }}</span>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="cell">
            <img src="@/assets/query/icon5.png" class="icon" />

            <div class="label">
              联系方式：<span class="val">{{ formData?.personData?.tel }}</span>
            </div>
          </div>

          <div class="cell">
            <img src="@/assets/query/icon8.png" class="icon" />

            <div class="label">
              现住址：<span class="val">{{ formData?.personData?.address }}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="graph">
        <div class="tools">
          <div class="buttons" :class="{ active: active === 1 }" @click="changeActive(1)">人员基本信息</div>
          <div class="buttons" :class="{ active: active === 2 }" @click="changeActive(2)">核酸检测信息</div>
          <div class="buttons" :class="{ active: active === 3 }" @click="changeActive(3)">密接信息</div>
          <div class="buttons" :class="{ active: active === 4 }" @click="changeActive(4)">
            集中或居家隔离信息
          </div>
          <div class="buttons" :class="{ active: active === 5 }" @click="changeActive(5)">场所出入信息</div>
        </div>

        <div class="graph-body">
          <graph v-if="active === 1" :param="formData.graphData"></graph>
          <nucleic-acid v-if="active === 2" :param="formData.naData"></nucleic-acid>
          <Contiguit v-if="active === 3" :param="formData.contiguitData" />
          <Quarantine v-if="active === 4" :param="formData.quarantineData" />
          <access v-if="active === 5" :param="formData.accessData"></access>
        </div>
      </div>
    </div>

    <div class="data-panel">
      <div class="title">搜索结果</div>

      <div class="search-bar">
        <input v-model="form.key" placeholder="请输入姓名/身份证/手机号查询" />
        <button @click="getData">搜索</button>
      </div>

      <div class="label">关联数据库搜索</div>

      <div class="data-box">
        <div v-for="item in dataBase" :key="item.id" class="data-item">
          <div class="name" @click="goBase(item)">{{ item.name }}</div>
        </div>
      </div>

      <!-- <div class="data-group">
        <div class="data-group-title">基本库</div>
        <div class="data">
          <div class="data-item" @click="routerTo('/admin/#/yq/Person')">
            <i class="iconfont icon-users"></i>
            <span>人员基础数据库</span>
          </div>
        </div>
        <div class="data">
          <div class="data-item" @click="routerTo('/admin/#/yq/HsResultNeusoft')">
            <i class="iconfont icon-tools"></i>
            <span>核酸检测采集数据库</span>
          </div>
        </div>
        <div class="data">
          <div class="data-item" @click="routerTo('/admin/#/yq/HsResultHw')">
            <i class="iconfont icon-form"></i>
            <span>核酸检测结果数据库</span>
          </div>
        </div>
        <div class="data">
          <div class="data-item" @click="routerTo('/admin/#/yq/RiskPlace')">
            <i class="iconfont icon-qrcode"></i>
            <span>场所码申请数据库</span>
          </div>
        </div>
        <div class="data">
          <div class="data-item" @click="routerTo('/admin/#/yq/PlaceScanRec')">
            <i class="iconfont icon-scan"></i>
            <span>场所码扫码记录数据库</span>
          </div>
        </div>
        <div class="data">
          <div class="data-item" @click="routerTo('/admin/#/yq/PersonBackHome')">
            <i class="iconfont icon-exchange"></i>
            <span>来返周人员数据库</span>
          </div>
        </div>
      </div>
      <div class="data-group">
        <div class="data-group-title">专题库</div>
        <div class="data">
          <div class="data-item" @click="routerTo('/admin/#/yq/PersonPositive')">
            <i class="iconfont icon-role"></i>
            <span>阳性病人数据库</span>
          </div>
        </div>
        <div class="data">
          <div class="data-item" @click="routerTo('/admin/#/yq/PersonCloseContacts')">
            <i class="iconfont icon-department"></i>
            <span>阳性病人关系数据库</span>
          </div>
        </div>
        <div class="data">
          <div class="data-item" @click="routerTo('/admin/#/yq/PersonCentralIsolated')">
            <i class="iconfont icon-location"></i>
            <span>集中隔离人员数据库</span>
          </div>
        </div>
        <div class="data">
          <div class="data-item" @click="routerTo('/admin/#/yq/PersonHomeIsolated')">
            <i class="iconfont icon-renyuanjinchuzuyongzonghang"></i>
            <span>居家隔离人员数据库</span>
          </div>
        </div>
        <div class="data">
          <div class="data-item" @click="routerTo('/admin/#/yq/PersonFeverRegist')">
            <i class="iconfont icon-renyuanjinchuzuyongzonghang"></i>
            <span>发热门诊登记数据库</span>
          </div>
        </div>
        <div class="data">
          <div class="data-item" @click="routerTo('/admin/#/yq/PersonRenter')">
            <i class="iconfont icon-home"></i>
            <span>出租屋人员数据库</span>
          </div>
        </div>
      </div> -->
    </div>

    <user-click
      v-if="dialogVisible"
      :visible="dialogVisible"
      :data="tableData"
      @close="closeDialog"
      @confirm="confirmDialog"
    ></user-click>
  </div>
</template>

<script>
import MoniterItem from '@/components/MoniterItem.vue'
import Graph from './components/graph.vue'
import NucleicAcid from './components/nucleicAcid.vue'
import Access from './components/access.vue'
// import { selectByKey, selectByKeyQuery } from "../../api/oneKeySearch";
import UserClick from './components/userClick.vue'
import { ElNotification } from 'element-plus'
import request from '@/utils/request.js'
import scanResult from '@/data/scan-result.json'
import Contiguit from './components/Contiguit.vue'
import Quarantine from './components/Quarantine.vue'
import http from '@/utils/http'

export default {
  components: { UserClick, Access, NucleicAcid, Graph, MoniterItem, Contiguit, Quarantine },
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      active: 1,
      form: {
        result: [],
        key: '512345678913456782',
      },
      formData: {
        personData: {},
        graphData: [],
        naData: [],
        contiguitData: [],
        quarantineData: [],
        accessData: [],
      },
      dataBase: [
        {
          name: '人员基础数据库',
          checked: false,
          id: 1,
          router: '/admin/#/yq/Person',
        },
        {
          name: '核酸检测采集数据库',
          checked: false,
          id: 2,
          router: '/admin/#/yq/HsResultNeusoft',
        },
        {
          name: '核酸检测结果数据库',
          checked: false,
          id: 3,
          router: '/admin/#/yq/HsResultHw',
        },
        {
          name: '场所码申请数据库',
          checked: false,
          id: 4,
          router: '/admin/#/yq/RiskPlace',
        },
        {
          name: '来返周人员数据库',
          checked: false,
          id: 5,
          router: '/admin/#/yq/PersonBackHome',
        },
        {
          name: '阳性病人数据库',
          checked: false,
          id: 6,
          router: '/admin/#/yq/PersonPositive',
        },
        {
          name: '阳性病人关系数据库',
          checked: false,
          id: 7,
          router: '/admin/#/yq/PersonCloseContacts',
        },
        {
          name: '集中隔离人员数据库',
          checked: false,
          id: 8,
          router: '/admin/#/yq/PersonCentralIsolated',
        },
        {
          name: '居家隔离人员数据库',
          checked: false,
          id: 9,
          router: '/admin/#/yq/PersonHomeIsolated',
        },
        {
          name: '发热门诊登记数据库',
          checked: false,
          id: 10,
          router: '/admin/#/yq/PersonFeverRegist',
        },
        {
          name: '出租屋人员数据库',
          checked: false,
          id: 11,
          router: '/admin/#/yq/PersonRenter',
        },
      ],
    }
  },
  methods: {
    getData() {
      this.getUserData()
      this.getNATestData()
      this.getContiguitData()
      this.getQuarantineData()
      this.getAccessData()
    },
    // 跳转库
    goBase(item = {}) {
      const { router = '' } = item || {}

      if (!router) return

      this.routerTo(router)
    },
    // 人员基本信息
    getUserData() {
      http.get('/screen/query/base-info', { params: { idCard: this.form.key } }).then(res => {
        const { data = {} } = res || {}

        this.formData.personData = data || {}
        this.formData.graphData = [
          {
            name: data?.name,
            idNumber: data?.idCard,
          },
        ]
      })
    },
    // 核酸检测信息
    getNATestData() {
      http.get('/screen/query/hs-result', { params: { idCard: this.form.key } }).then(res => {
        const { data = {} } = res || {}

        this.formData.naData = data || {}
      })
    },
    // 密接信息
    getContiguitData() {
      http.get('/screen/query/probably', { params: { idCard: this.form.key } }).then(res => {
        const { data = {} } = res || {}

        this.formData.contiguitData = data || {}
      })
    },
    // 集中或居家隔离信息
    getQuarantineData() {
      http.get('/screen/query/isolate', { params: { idCard: this.form.key } }).then(res => {
        const { data = {} } = res || {}

        this.formData.quarantineData = data || {}
      })
    },
    // 场所出入信息
    getAccessData() {
      http.get('/screen/query/scan', { params: { idCard: this.form.key } }).then(res => {
        const { data = {} } = res || {}

        this.formData.accessData = data || {}
      })
    },
    changeActive(index) {
      this.active = index
    },
    // 根据筛选条件查询相关数据
    getParam() {
      request.get('/person_info/search', { params: { keyword: this.form.key } }).then(res => {
        let user = res.data.data.info
        if (user) {
          /*if (res.data.data.length>1){
            this.tableData=res.data.data
            this.dialogVisible=true
          }else {
            this.getInfo(res.data.data[0].idNumber)
          }*/

          let hsResults = []

          res.data.data.hsList.forEach(item => {
            hsResults.push({
              censusAddress: item.ywAgencySerialCode,
              cyTime: item.ywSamplingTime,
              laboratory: item.ywAgencySerialCode,
              sendTime: item.ywSamplingTime,
              state: item.ywCheckStatus,
            })
          })
          this.formData = {
            personBase: {
              name: user.username,
              phoneNumber: user.tel,
              idNumber: user.cardno,
              address: user.area,
              createTime: '',
              sfcz: '否',
              lastReturn: '2022-11-25 13:04:00',
            },
            hsResults: hsResults,
            familyMembers: [
              {
                name: user.username,
                idNumber: user.cardno,
              },
            ],
            placeCodes: scanResult.map(item => {
              return {
                placeLocation: item['场所位置'],
                scancodeDate: item['扫码时间'],
                cstype: item['场所类型'],
                placeName: item['场所名称'],
                healthcodeStatus: '绿码',
              }
            }),
          }
        } else {
          ElNotification({
            title: 'Error',
            message: '暂无相关信息',
            type: 'error',
          })
        }
      })
    },
    // 获取人员数据
    getInfo(idNumber) {
      //   selectByKeyQuery({idNumber:idNumber}).then(res=>{
      //     this.formData=res.data.data
      //   })
    },
    // 关闭弹窗
    closeDialog() {
      this.dialogVisible = false
    },
    // 人员选择后根据身份证查询人员信息
    confirmDialog(idNumber) {
      this.dialogVisible = false
      this.getInfo(idNumber)
    },
    // 跳转外部链接 -- key超过10位跳转时带参数
    routerTo(url) {
      const param = this.form.key.length > 10 ? '?key=' + this.form.key : ''
      window.open(url + param, '_blank')
    },
  },
}
</script>

<style lang="less" scoped>
.queryBox {
  display: flex;

  .main-panel {
    flex: 1;
    height: 943px;
    background-image: url('@/assets/query/boxbg1.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    padding: 0 16px;
    overflow: hidden;

    .title {
      margin-top: 6px;
      width: 100%;
      height: 24px;
      font-size: 14px;
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .detail {
      display: flex;
      align-items: center;
      padding: 0 16px;
      height: 151px;
      background: rgba(0, 152, 221, 0.2);
      margin-top: 16px;

      .row {
        flex: 1;

        &:not(:first-child) {
          margin-left: 16px;
        }

        .cell {
          display: flex;

          &:not(:first-child) {
            margin-top: 23px;
          }

          .icon {
            width: 24px;
            height: 24px;
          }
          .label {
            margin-left: 8px;
            flex: 1;
            height: 22px;
            font-size: 16px;
            font-weight: 400;
            color: #71a6c1;
            display: flex;
            align-items: center;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;

            .val {
              color: #fff;
            }
          }
        }
      }
    }
    .graph {
      margin: 16px 0 30px 0;
      padding: 16px;
      flex: 1;
      background: rgba(0, 152, 221, 0.2);
      display: flex;
      flex-direction: column;
      overflow: hidden;

      .tools {
        display: flex;
        justify-content: center;
        align-items: center;

        .buttons {
          width: 148px;
          height: 36px;
          background: rgba(0, 152, 221, 0.4);
          border-radius: 4px;
          font-size: 14px;
          color: #ffffff;
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;

          &:not(:first-child) {
            margin-left: 16px;
          }

          &:hover {
            background-color: rgba(0, 152, 221, 1);
          }

          &.active {
            background-color: rgba(0, 152, 221, 1);
          }
        }
      }

      .graph-body {
        flex: 1;
        margin-top: 44px;
        overflow: hidden auto;
      }
    }
  }
  .data-panel {
    width: 308px;
    height: 943px;
    margin-left: 16px;
    display: flex;
    flex-direction: column;
    background-image: url('@/assets/query/boxbg2.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 0 16px;
    overflow: hidden;

    .title {
      margin-top: 6px;
      height: 20px;
      font-size: 14px;
      font-weight: 500;
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .search-bar {
      display: flex;
      align-items: center;
      margin-top: 24px;

      input {
        flex: 1;
        padding: 0 16px;
        height: 36px;
        background: rgba(0, 152, 221, 0.4);
        border-radius: 18px;
        border: 1px solid #37a5db;
        font-size: 14px;
        font-weight: 400;
        color: #ffffff;
      }
      input::-webkit-input-placeholder {
        color: #ffffff;
      }
      /* IE 10+ */
      input:-ms-input-placeholder {
        color: #ffffff;
      }
      /* Firefox 4-18 */
      /* Firefox 19+ */
      input:-moz-placeholder,
      input::-moz-placeholder {
        color: #ffffff;
      }
      input:focus {
        outline: none;
        border: 1px solid #37a5db;
      }

      button {
        margin-left: 8px;
        width: 53px;
        height: 36px;
        background: #0098dd;
        border-radius: 4px;
        border: none;
        opacity: 1;
        font-size: 14px;
        font-weight: 600;
        color: #ffffff;
        cursor: pointer;
      }
    }

    .label {
      margin-top: 48px;
      padding: 15px 0 16px 0;
      width: 100%;
      border-top: 1px solid #4f5f7f;
      height: 20px;
      font-size: 14px;
      font-weight: 400;
      color: #a0b3d8;
    }

    .data-box {
      flex: 1;
      overflow: hidden auto;

      .data-item {
        display: flex;
        align-items: center;
        margin-bottom: 23px;

        .name {
          height: 22px;
          font-size: 16px;
          font-weight: 400;
          color: #ffffff;
          display: flex;
          align-items: center;
          cursor: pointer;
        }
      }
    }
    .data-group {
      flex: 1;
      background: #2861af;
      opacity: 0.8;
      margin: 0 1.5vh 1.5vh 1.5vh;
      border-radius: 0px;
      display: flex;
      flex-direction: column;
      padding: 1vh;
      div {
        flex: 1;
      }
      .data-group-title {
        flex: 0.5;
        background: url('../../assets/data-group-title.png') no-repeat;
        background-size: 100% 100%;
        padding-left: 2vh;
        font-size: 18px;
        font-weight: bold;
        line-height: 28px;
        color: #10f3fc;
        opacity: 1;
        margin-bottom: 1vh;
      }
      .data {
        padding-top: 0.5vh;
        padding-bottom: 0.5vh;
        clear: both;
        .data-select {
          float: left;
          width: 10%;
          vertical-align: middle;
          height: 32px;
          padding-top: 9px;
          input {
            width: 18px;
            height: 18px;
            background: #104889;
            border: 1px solid rgba(161, 211, 253, 0.4);
            opacity: 1;
            border-radius: 0px;
          }
        }
        .data-item {
          width: 100%;
          float: left;
          cursor: pointer;
          background: url('../../assets/data-item.png') no-repeat;
          background-size: 100% 100%;
          height: 32px;
          line-height: 32px;
          i.iconfont {
            color: #7adaf1;
            position: relative;
            left: 20px;
          }
          span {
            color: #fff;
            position: relative;
            left: 80px;
          }
        }
      }
    }
  }
}
</style>
